
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        .nianli{
            border: 2px solid red;
            display: grid; /* 网格布局 */
            grid-template-columns: repeat(6, auto); /* 一行元素的个数，宽度auto */
            gap: 10px; /* 容器内各个子元素之间的间距 */
            padding: 10px; /* 内边距 */
        }
        .data{
            display: grid;
            grid-template-columns: repeat(7, auto);
        }
        .data > div{
            text-align: center;
            /*border: 1px solid #ddd;*/
        }
        .yueli{
            border: 1px solid blue;
            padding: 5px;
        }
        .yue{
            color:red;
            font-weight: bold;
            text-align: center;
            line-height: 2;
        }
        .title{
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            color:red;
            line-height: 2;
        }
    </style>
    <title>年历</title>
</head>
<body>
<div class='kuang'>
    <div class="title">2025年</div>
    <div class='nianli'>
        <div class='yueli'>
            <div class='yue'>1月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>2月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div></div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>3月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div></div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>4月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>5月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>6月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div></div><div></div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>7月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>8月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>9月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>10月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>11月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div></div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>12月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
